import { useState, useRef, useEffect } from 'react';
import Typography from "../index.js"
const { Title, Paragraph, Text } = Typography;
import { IconCopy, IconSuccessFilling, IconEdit } from "../../icon/index"

const App = () => {
    const titleRef = useRef(null)
    useEffect(() => {
        console.log(titleRef.current);
    }, [])
    return (
        <Typography style={{}}>
            <Title ref={titleRef}>Design system</Title>
            <Paragraph>
                A design is a plan or specification for the construction of an object or system or for the
                implementation of an activity or process, or the result of that plan or specification in the
                form of a prototype, product or process. The verb to design expresses the process of
                developing a design.
            </Paragraph>
            <Paragraph>
                In some cases, the direct construction of an object without an explicit prior plan (such as
                in craftwork, some engineering, coding, and graphic design) may also be considered
                <Text bold>to be a design activity.</Text>
            </Paragraph>
            <Title heading={2}>ArcoDesign</Title>
            <Paragraph>
                The ArcoDesign component library defines a set of default particle variables, and a custom
                theme is to <Text mark>customize</Text> and <Text underline>overwrite</Text> this variable
                list.
            </Paragraph>
            <Paragraph blockquote>
                A design is a plan or specification for the construction of an object or system or for the
                implementation of an activity or process, or the result of that plan or specification in the
                form of a <Text code>prototype</Text>, <Text code>product</Text> or
                <Text code>process</Text>. The verb to design expresses the process of developing a design.
            </Paragraph>
            <Paragraph mark underline delete>
                A design is a plan or specification for the construction of an object or system or for the
                implementation of an activity or process.
            </Paragraph>
            <Paragraph>
                <ul>
                    <li>
                        Architectural blueprints
                        <ul>
                            <li>Architectural blueprints</li>
                        </ul>
                    </li>
                    <li>Engineering drawings</li>
                    <li>Business processes</li>
                </ul>
            </Paragraph>
            <Paragraph>
                <ol>
                    <li>Architectural blueprints</li>
                    <li>Engineering drawings</li>
                    <li>Business processes</li>
                </ol>
            </Paragraph>
        </Typography>
    );
};
const App2 = () => {
    return (
        <Typography>
            <Typography.Title>H1. The Pragmatic Romanticism</Typography.Title>
            <Typography.Title heading={2}>H2. The Pragmatic Romanticism</Typography.Title>
            <Typography.Title heading={3}>H3. The Pragmatic Romanticism</Typography.Title>
            <Typography.Title heading={4}>H4. The Pragmatic Romanticism</Typography.Title>
            <Typography.Title heading={5}>H5. The Pragmatic Romanticism</Typography.Title>
            <Typography.Title heading={6}>H6. The Pragmatic Romanticism</Typography.Title>
        </Typography>
    );
};
const App3 = () => {
    return (
        <>
            <Typography.Text>Arco Design</Typography.Text><br />
            <Typography.Text type='secondary'>Secondary</Typography.Text><br />
            <Typography.Text type='primary'>Primary</Typography.Text><br />
            <Typography.Text type='success'>Success</Typography.Text><br />
            <Typography.Text type='warning'>Warning</Typography.Text><br />
            <Typography.Text type='error'>Error</Typography.Text><br />
            <Typography.Text bold>Bold</Typography.Text><br />
            <Typography.Text disabled>Disabled</Typography.Text><br />
            <Typography.Text mark>Mark</Typography.Text><br />
            <Typography.Text underline>Underline</Typography.Text><br />
            <Typography.Text delete>Line through</Typography.Text><br />
            <Typography.Text code>Code snippet</Typography.Text><br />
        </>
    )
}

const App5 = () => {
    return (
        <Typography>
            <Title heading={5}>Default</Title>
            <Paragraph>
                A design is a plan or specification for the construction of an object or system or for the
                implementation of an activity or process, or the result of that plan or specification in the
                form of a prototype, product or process. The verb to design expresses the process of
                developing a design. In some cases, the direct construction of an object without an explicit
                prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be
                considered to be a design activity.
            </Paragraph>
            <Title heading={5}>Secondary</Title>
            <Paragraph type='secondary'>
                A design is a plan or specification for the construction of an object or system or for the
                implementation of an activity or process, or the result of that plan or specification in the
                form of a prototype, product or process. The verb to design expresses the process of
                developing a design. In some cases, the direct construction of an object without an explicit
                prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be
                considered to be a design activity.
            </Paragraph>
            <Title heading={5}>Spacing default</Title>
            <Paragraph>
                A design is a plan or specification for the construction of an object or system or for the
                implementation of an activity or process, or the result of that plan or specification in the
                form of a prototype, product or process. The verb to design expresses the process of
                developing a design. In some cases, the direct construction of an object without an explicit
                prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be
                considered to be a design activity.
            </Paragraph>
            <Title heading={5}>Spacing close</Title>
            <Paragraph type='secondary' spacing='close'>
                A design is a plan or specification for the construction of an object or system or for the
                implementation of an activity or process, or the result of that plan or specification in the
                form of a prototype, product or process. The verb to design expresses the process of
                developing a design.
            </Paragraph>
        </Typography>
    );
};

function App6() {
    const [str, setStr] = useState('Click the icon to edit this text.');
    return (
        <Typography>
            <Typography.Paragraph copyable>Click the icon to copy this text.</Typography.Paragraph>
            <Typography.Paragraph
                editable={{
                    onChange: setStr,
                }}
            >
                {str}
            </Typography.Paragraph>
            {
                [...new Array(6)].map((_, index) => {
                    return <Typography.Title
                        editable
                        heading={index + 1}
                        style={{ margin: 0 }}
                        key={index}
                    >
                        H{index + 1}. The Pragmatic Romanticism
                    </Typography.Title>
                })
            }
        </Typography>
    );
}
const text = 'A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design. A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design. The verb to design expresses the process of developing a design.';
function App7() {
    const [expanded, setExpanded] = useState(false);

    const expandRender = (expanded) => {
        if (!expanded) {
            return <IconEdit className='action-btn' />;
        }
        return <IconSuccessFilling className='action-btn' />
    }

    return (
        <div>
            <Typography.Ellipsis
                rows={4}
                defaultExpanded={false}
                expanded={expanded}
                expandRender={expandRender}
                onExpand={setExpanded}
                style={{ width: 500 }}
            >{text}</Typography.Ellipsis>
        </div>
    );
}

export default App7;
